<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
  <style>
    body {
      background: url("imgs/bg.webp") no-repeat;
      background-size: cover;
    }
  </style>

  <!--  引入资源文件-->
  <script src="js/resources.js"></script>
</head>
<body>

  <div id="app">

    <div style="width: 400px; background-color: #fff; margin: 150px auto; text-align: center; border: 1px solid #ddd; padding: 30px 0 50px 0;
     border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, .2);">
      <div style="width: 80%; margin: 0 auto">
        <div style="margin: 20px; color: green"><h2>注 册</h2></div>
        <div class="input-group mb-3">
          <span class="input-group-text"><i class="bi bi-person-circle"></i></span>
          <input type="text" class="form-control" placeholder="用户名" v-model="username">
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
          <input type="password" class="form-control" placeholder="密码" v-model="password">
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
          <input type="password" class="form-control" placeholder="确认密码" v-model="confirm">
        </div>
        <div class="mb-3">
          <button style="width: 100%" class="btn btn-success" @click="register">注 册</button>
        </div>
        <div style="text-align: right;"><a href="/login.html">前往登录</a></div>
      </div>

    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          username: '',
          password: '',
          confirm: ''
        }
      },
      methods: {
        register() {
          if (!this.username || !this.password || !this.confirm) {
            $.message({message: "请输入账号和密码", type: "warning"})
            return
          }
          if (this.password !== this.confirm) {
            $.message({message: "您两次输入的密码不一致", type: "warning"})
            return
          }
          // 发送请求给后台
          fetch("/user/register", {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'  //  百度搜索  json是什么，{ "name": "zhang", "age": 10 } json对象，// [{ "name": "zhang", "age": 10 },{ "name": "zhang", "age": 10 }] json数组
            },
            body: JSON.stringify({ username: this.username, password: this.password })  // {"username": "admin", "password": "admin"}
          }).then(res => res.json())
          .then(res => {   // res就是后台返回的结果
            if (res.code === '200') {  // 判断请求是否成功
              $.message({message: "注册成功", type: 'success'})
              setTimeout(() => {
                location.href = '/login.html'
              }, 1000)
            } else {
              $.message({message: res.msg, type: 'error'})
            }
          })
        }
      }
    })
  </script>

</body>
</html>